﻿@page "/docs/extensions/datagrid/templates"

<DocsPageTitle>
    DataGrid : Templates
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Templates">
        <Paragraph>
            For extra customization <Code>DataGrid</Code> will provide you with two additional templates that you can use to extend it’s default behavior.
        </Paragraph>
        <Paragraph>
            A display template is used to customize display cells and an edit template is used to customize cell editors. You can place anything inside of the templates, be it a Blazorise components, regular html tags or your own components.
        </Paragraph>
        <Paragraph>
            Both templates have a special <Code>context</Code> attribute that is used to give access to the underline cell value. To learn more about <Code>context</Code> please go to official <Blazorise.Link To="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-5.0" Target="Target.Blank">Blazor documentation</Blazorise.Link>.
        </Paragraph>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DisplayTemplate">
        Display template is using <Code>TItem</Code> as a context value.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridDisplayTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridDisplayTemplateExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="EditTemplate">
        Edit template will give you a way to handle the editing of grid cell values. For this template <Code>CellEditContext</Code> is used as a <Code>context</Code> value. Use it to get or set the cell values.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridEditTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridEditTemplateExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DetailRowTemplate">
        <Paragraph>
            <Code>DetailRowTemplate</Code> allows you to display nested structure bellow each row in the grid. One of the examples is “master-detail” relationship between two data-source inside the <Code>DataGrid</Code>.
        </Paragraph>
        <Paragraph>
            For this template the <Code>context</Code> value is the item from the parent grid.
        </Paragraph>
        <Paragraph>
            Once it’s defined a DetailRow will be visible for every row in the grid. If you want to control the visibility of detail-row you can use <Code>DetailRowTrigger</Code> attribute that can be defined in it’s parent grid.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridDetailRowTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridDetailRowTemplateExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Command Templates">
        <Paragraph>
            If you want to change the default command buttons, you can use following templates:
        </Paragraph>
        <ul>
            <li><Code>NewCommandTemplate</Code></li>
            <li><Code>EditCommandTemplate</Code></li>
            <li><Code>SaveCommandTemplate</Code></li>
            <li><Code>CancelCommandTemplate</Code></li>
            <li><Code>DeleteCommandTemplate</Code></li>
            <li><Code>ClearFilterCommandTemplate</Code></li>
        </ul>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridCommandTemplatesExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCommandTemplatesExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Loading Templates">
        <Paragraph>
            If you want to change display of content, while grid is empty or <Code>ReadData</Code> is executing, you can use following templates:
        </Paragraph>
        <ul>
            <li><Code>EmptyTemplate</Code></li>
            <li><Code>LoadingTemplate</Code></li>
        </ul>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridLoadingEmptyTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridLoadingEmptyTemplateExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ButtonRow Template">
        <Paragraph>
            Provide a <Code>ButtonRowTemplate</Code> and have the <Code>DataGridCommandMode</Code> set to either <Code>Default</Code> or <Code>ButtonRow</Code>.
        </Paragraph>

        <Paragraph>
            The template has access to the internal commands so you’re also able to construct your own buttons on the pager that can also trigger the Datagrid’s CRUD and clear filter operations as shown in the example below:
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridButtonRowExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridButtonRowExample" />
</DocsPageSection>
